<template>
	<view class="main flex justify-center">
	
		<view class="margin-left-lg margin-right-lg margin-top-lg">
			<view class="head"></view>
			<form>
				<view class="cu-form-group">
					<view class="flex title justify-center">
						<text class="text-orange cuIcon-people"></text>
					</view>
					<input v-model="username" type="text" maxlength="32" placeholder="用户名"></input>
				</view>
				<view class="cu-form-group">
					<view class="flex title justify-center">
						<text class="text-orange cuIcon-lock"></text>
					</view>
					<input v-model="upassword" type="text" maxlength="32" placeholder="原始密码"></input>
				</view>
				<view class="cu-form-group">
					<view class="flex title justify-center">
						<text class="text-orange cuIcon-lock"></text>
					</view>
					<input v-model="password" type="text" maxlength="32"  placeholder="新密码" :password="!showPassword"></input>
					<text :class="'cuIcon-'+[showPassword?'attention':'attentionforbid']" class="text-orange" @tap="display"></text>
				</view>
				
			</form>
			<view class="padding flex flex-direction" @tap="bindChpassword">
			
				<button class="cu-btn round lg bg-green text-center">确认修改</button>
				
			</view>

		</view>
	</view>
</template>

<script>
	var tha,js;
	export default {
		onLoad(){
			tha = this;
			
		},
		data() {
			return {
				username:this.$store.state.userInfo.username,
				upassword:'',
				password:'',
				showPassword:false
			};
		},
		methods: {
			display() {
			    this.showPassword = !this.showPassword
			},
		    bindChpassword() {
				this.$H.put('/user/user/reset',{
					username:this.username,
					upassword:this.upassword,
					password:this.password
				}).then(res=>{
					let [err,result] = res;
					if(result.data.code == '401'){
						uni.showModal({
							title:'错误提示',
							content:'密码输入错误',
							showCancel:false
						})
						return;
					}
					if(result.data.code == '200'){
						uni.showModal({
							title:'修改成功',
							content:'密码修改成功,即将返回登录页面',
							showCancel:false,
							success: (res) => {
								this.$store.commit('alterHasLogin',false)
								if(res.confirm){
									uni.navigateBack({
										animationType:'slide-out-left',
										animationDuration:'200'
									})
								}
							}
						})
					}
				})
				
		    }
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	.main{
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
	    background-color: white;
	}
	.head{
		height: 20%;
	}
</style>
